<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>
<!-- 
    将 v-model 放在自定义组件上，相当于给该组件传递了两个东西
    第一个： 相当于给组件传递一个属性，这个属性是 modelValue,子组件可以直接接收使用
    第二个： 相当于给组件添加了一个自定义事件，事件名称是 update:modelValue，子组件可以
    直接使用 this.$emit() 修改值
-->

<body>
    <div id='app'>

        <h1>内容：{{msg}}</h1>
        <input type="text" v-model='msg'>
        <input type="text" :value="msg" @input="msg = $event.target.value">
        <hr>

        <!-- 在组件上使用 v-model 相当于传递一个属性 和 一个事件 -->
        <!-- 属性是 modelValue --> 
        <!-- 事件是 update:modelValue -->
         <!-- 这属性和事件名可以改 
            v-model:message="msg" 那事件名叫 update:message -->
        <box v-model="msg"></box>

    </div>
</body>

<template id="box">
    <div>
        <h1>组件：{{modelValue}}</h1>
        <!-- <input :value="modelValue" type="text" @input="changeinput"> -->
        <!-- 还可以用v-model -->
         <input v-model="title" type="text"></input>
    </div>
</template>

<script>

    const box = {
        template: '#box',
        props: ['modelValue'],
        methods: {
            changeinput() {
                console.log(event.target.value);
                this.$emit('update:modelValue', event.target.value)
            }
        },
        computed:{
            title:{
                get(){
                    return this.modelValue
                },
                set(val){
                    this.$emit('update:modelValue',val)

                }
            }
        }
    }

    const app = {
        data() {
            return {
                msg: ''
            }
        },
        methods: {},
        components: {
            box
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>